<template>
    <div>
        <el-alert v-show="!isEmptyStr(sheet.remark)" title="备注" type="warning" :description="sheet.remark" style="white-space: pre-line"
                  :closable="false"/>
        <el-table v-if="sheet.model == 'model_atom'" :data="data" size="mini" border :max-height="tableHeight">
            <el-table-column align="center" prop="title">
                <template slot="header" slot-scope="scope">
                    <el-tag style="font-weight: bold;font-size: 14px;float: left">{{sumScore}}/{{sheet.total}}</el-tag>
                    <span>{{ sheet.name }}</span>
                    <el-button size="mini" type="primary" style="float: right;" icon="el-icon-s-promotion" @click="saveMark" plain round>保存</el-button>
                </template>
                <el-table-column header-align="center" align="left" prop="step">
                    <template slot="header" slot-scope="scope">
                        <span>{{ sheet.stepName }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="分数" prop="score" width="110"/>
                <el-table-column align="center" label="得分" prop="mark" width="155">
                    <template slot-scope="scope" style="padding: 0">
                        <el-row style="margin: 0;padding: 0">
                             <el-col :span="18">
                                 <el-input-number v-model="scope.row.mark" @change="sumTotal" :max="scope.row.score" :min="0" size="mini" controls-position="right" style="width: 100px"/>
                             </el-col>
                             <el-col :span="3">
                                 <el-button type="text" @click="()=> {scope.row.mark = scope.row.score;sumTotal()}">满分</el-button>
                             </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>

        <el-table v-else :data="data" size="mini" :span-method="objectSpanMethod" border :max-height="tableHeight">
            <el-table-column align="center" prop="title">
                <template slot="header" slot-scope="scope">
                    <el-tag style="font-weight: bold;font-size: 14px;float: left">{{sumScore}}/{{sheet.total}}</el-tag>
                    <span>{{ sheet.name }}</span>
                    <el-button size="mini" type="primary" style="float: right;" icon="el-icon-s-promotion" @click="saveMark" plain round>保存</el-button>
                </template>
                <el-table-column align="center" label="顺序" prop="order" width="130"/>
                <el-table-column header-align="center" align="left" prop="step">
                    <template slot="header" slot-scope="scope">
                        <span>{{ sheet.stepName }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="分数" prop="score" width="110"/>
                <el-table-column align="center" label="得分" prop="mark" width="155">
                    <template slot-scope="scope">
                        <div style="margin: 0;padding: 0;">
                            <el-row style="margin: 0;padding: 0">
                                <el-col :span="18">
                                    <el-input-number v-model="scope.row.mark" @change="sumTotal" :max="scope.row.score" :min="0" size="mini" controls-position="right" style="width: 100px"/>
                                </el-col>
                                <el-col :span="3">
                                    <el-button type="text" @click="()=> {scope.row.mark = scope.row.score;sumTotal()}">满分</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>

        <el-input type="textarea" :rows="5" v-model="goMark.comment" style="margin-top: 20px" placeholder="老师评语"></el-input>
    </div>
</template>

<script>

import {isEmpty, isEmptyStr} from "@/utils/zzDouUtils/objUtil";
import {arrSumByKey} from "@/utils/zzDouUtils/arrayUtil";

export default {
    name: "go_score_score_mark",
    props: {
        goMark:{
            type: Object,
            default: ()=>{},
        },
        sheet: {
            type: Object,
            default: ()=>{
                return {
                    remark:null,
                    steps: [],
                }
            },
        },
    },
    data() {
        return {
            tableHeight: '300',
            project_merageArr: null,  //第一列进行合并操作时存放的数组变量
            project_meragePos: null,  //上面的数组的下标值
            step_merageArr: null,     //第二列进行合并操作时存放的数组变量
            step_meragePos: null,    //上面的数组的下标值
            comment:'',
            data:[],
            sumScore: 0,
        };
    },
    watch:{
        sheet: {
            handler(newVal, oldVal) {
                this.initScoreMap();
                if (this.sheet.model == 'model_order_step') {
                    this.init();
                    this.merage();
                }
            },
            // 开启深度监听
            deep: true
        }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.resizePage();
            })();
        };
    },
    created() {
        this.resizePage();
        this.initScoreMap();
        if (this.sheet.model == 'model_order_step') {
            this.init();
            this.merage();
        }
    },
    methods: {
        resizePage(){
            let de = document.documentElement;
            let width = de.clientWidth;
            let height = de.clientHeight;
            this.w = width;
            this.h = height;
            this.tableHeight = height/2 + '';
        },
        isEmptyStr,
        /** 保存分数 */
        saveMark(){
            this.$emit("save");
        },
        /** 初始化分数容器 */
        initScoreMap() {
            this.data = this.sheet.steps;
            this.sumTotal();
        },
        /** 总得分 */
        sumTotal(){
            if (isEmpty(this.data)){
                return;
            }
            this.sumScore = arrSumByKey(this.data,'mark');
        },
        /** element-ui 合并列的方法 */
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 0) {
                // 第一列的合并方法
                const row1 = this.project_merageArr[rowIndex];
                const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                return {rowspan: row1, colspan: col1};
            }
        },
        init() {
            //初始化数据函数
            this.project_merageArr = [];
            this.project_meragePos = 0;
            this.step_merageArr = [];
            this.step_meragePos = 0;
        },
        /** element-ui 合并多列专用 */
        merage() {
            this.init();
            for (let i = 0; i < this.sheet.steps.length; i++) {
                if (i === 0) {
                    // 第一行必须存在
                    this.project_merageArr.push(1);
                    this.project_meragePos = 0;
                    this.step_merageArr.push(1);
                    this.step_meragePos = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同,eg：paragraph_meragePos 是 typeNameArr序号
                    // 第一列
                    if (this.data[i].order === this.data[i - 1].order) {
                        this.project_merageArr[this.project_meragePos] += 1;
                        this.project_merageArr.push(0);
                    } else {
                        this.project_merageArr.push(1);
                        this.project_meragePos = i;
                    }
                }
            }
        }
    },
};
</script>
<style>
</style>
